<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath %>">
	<%@include file="/views/global/ShopInclude.jsp" %>
	<%@include file="/views/global/AdminScripts.jsp" %>
	<link href="static/css/page/detail.css" rel="stylesheet" type="text/css">
	
	<title>
		<c:choose><c:when test="${empty itemInfo.title }">ITEM NOT FOUND</c:when><c:otherwise>${itemInfo.title }</c:otherwise></c:choose>
	</title>
</head>
<body class="detailbody">
<%@include file="/views/global/SearchBar.jsp" %>

<c:choose>
<c:when test="${empty itemInfo }">
<div class="main-md">
	<div class="clearfix" style="height:50px;"></div>
	<div class="alert alert-danger">SORRY, THE ITEM YOU FOUND NOT EXISTS OR HAVE BEEN DELETED!</div>
</div>
</c:when>
<c:otherwise>

<div class="detailPageContainer contentWidth center font">

  <div style="height:30px;"></div>

  <div class="detailPageRight right fontColorGray">   <!-- 商品右侧信息 -->
    <ul>
      <li class="commodityName">${itemInfo.title }</li>
      <li class="commodityName">${itemInfo.cnName }</li>
      <c:if test="${0 < itemInfo.discountPercent }">
      	<li class="saleSpecialInfo">DISCOUNT ${itemInfo.discountPercent }%</li>
      </c:if>
      <li class="quality">
        <p class="qualityTitle" style="margin-top: 5px;">QUALITY ASSURANCE 认证:</P>
        <p class="qualityInfo"><img alt="" src="static/images/page/detailPage/quality1.png" style="margin-right: 10px;">Independent Designer Brand 独立品牌<br/><img alt="" src="static/images/page/detailPage/quality2.png" style="margin-right: 10px;">Seahello Certified Merchant 认证商家</P>
      </li>
      <li class="price">
        <p class="priceTitle left">PRICE 价格:</P>
        <p class="newPrice left">¥ ${itemInfo.price - itemInfo.discountVolume }</P>
        <p class="oldPrice">¥ ${itemInfo.price }</P>
      </li>
      <li class="item-prop">
        <p class="colorTitle left">PACKAGE 套餐:</P>
        <div class="btn-toolbar">
        	<c:forEach var="sku" items="${itemSkuList }" varStatus="pc">
        		<button type="button" class='btn btn-default<c:if test="${1 eq fn:length(itemSkuList) }"> selected</c:if>'>
        			<span skuId="${sku.id }" >${sku.properties }</span><i></i>
        		</button>
        	</c:forEach>
        </div>
      </li>
      <li class="sum">
        <p class="sumTitle left">SUM 数量:</P>
        <input type="number" name="buyNumber" class="sumOption" value="1" min="1"></input>
      </li>
      <li class="deliver">
        <p class="deliverTitle left" style="margin-right: 10px;">DELIVER 物流:</P>
        <div class="deliverOptions">
           <a href="javascript:void(0)" class="deliverOptionshover">PARCELFORCE</a>
           <a href="javascript:void(0)">DHL</a>
           <a href="javascript:void(0)">BPOST</a>
        </div>
        <p class="wasteTime">WILL BE DELIVERED IN 17 DAYS 预计17天内到货</p>
      </li>
    </ul>
    <form id="submitForm" class="commodityBtns" method="post">
      <input type="hidden"  name="itemId" value="${itemInfo.id }" />
      <input type="hidden"  name="skuId" value="" />
      <input type="hidden"  name="properties" value="" />
      <input type="hidden"  name="quantity" value="" />
      <input type="button" class="addCartBtn left" style="width:180px;" value="ADD TO CART  加入购物车"/>
      <input type="button" class="buyBtn" value="BUY NOW  立即购买" onclick="$('#buywarning').show();"/>
     </form>
    <div class="storeLink">
      <div class="storeLinkTitle">LINK TO STORE&nbsp;&nbsp;逛逛店铺</div>
      <div class="storeArea">
        <a href="seller/sellerHome?sellerId=${designer.userId }" title="CLICK HERE TO SEE HER HOME PAGE">
			<c:choose>
            <c:when test="${empty designer.sellerFileId }">
            <img class="storePhoto center" src="static/images/global/blank.png" />
            </c:when><c:otherwise>
            <img class="storePhoto center" src="${fileServerBasePath }download/${designer.sellerFileId }" />
            </c:otherwise></c:choose>
		</a>
        <div class="storeName fontColorGray en_M textCenter">${designer.storeName }</div>
        <div class="storeAddress fontColorGray en_SS textCenter">${designerAddress.strLocationNames }</div>
      </div>
    </div>
    
    <div class="productLink">
      <div class="productLinkTitle">RELATED PRODUCTS&nbsp;相似推荐</div>
      <div class="productArea">
      	<c:forEach var="item" items="${relatedItemList }">
      		<div class="productLinkSole">
	          <a href="item/detail?id=${item.id }" target="_blank"><img src="${item.mainUrl }" title="${item.title }"/></a>
	          <p>${item.title }</p>
	          <p>${item.cnName }</p>
	        </div>
      	</c:forEach>
      </div>
    </div>
    
  </div>
  
  <div class="detailPageLeft left">
    <!-- 商品焦点图 -->
    <ul class="pgwSlider">
    <c:forEach var="itemImage" items="${itemImages }">
			<li><img src="${itemImage.originUrl }"></li>
    </c:forEach>
    </ul>
    <script src="static/javascript/page/detailPage/pgwslider.min.js"></script>
    <script src="static/javascript/module/generic.js"></script>
    <script src="static/javascript/page/detailPage/ItemDetail.js"></script>
    <!-- 商品焦点图结束-->
    <!-- 商品页面中的3个切换标签 -->
    <ul class="detailTabs" role="tablist">
      <li class="productDetailTab left" style="padding-left: 0;">DETAILS 详情</li>
      <li class="serviceTab left">LOGISTICS & SERVICE 物流&服务</li>
      <li class="comment left">COMMENT 评论</li>
    </ul>
    <div class="tab-content">
    	<div class="tab-pane active">
    		<!-- 商品参数表 -->
		    <ul class="detailInfo en_M">
		      <li><p class="detailInfoTitle left">CATEGORY 品类:</p><p class="detailInfoContent"><a href="javascript:void(0)">${categoryName }</a></p></li>
		      <li><p class="detailInfoTitle left">BRAND 品牌:</p><p class="detailInfoContent"><a href="javascript:void(0)">${itemInfo.brand }</a></p></li>
		      <li><p class="detailInfoTitle left">MATERIAL 材质:</p><p class="detailInfoContent"><a href="javascript:void(0)">${itemInfo.material }</a></p></li>
		      <li><p class="detailInfoTitle left">PLACE OF PRODUCT 产地:</p><p class="detailInfoContent"><a href="javascript:void(0)">${originAddress.strLocationNames }</a></p></li>
		      <li><p class="detailInfoTitle left">CUSTOMISABLE 是否可以定制:</p><p class="detailInfoContent">${deletedMap[itemInfo.customized] }</p></li>
		    </ul>
		    <!-- 商品内容展示，包含文本和图片 -->
		    <div class="detailExhibitionContent">
		      ${itemInfo.productDesc }
		    </div>
    	</div>
    	<div class="tab-pane">
    	    <p style="height:20px;"></p>
    		${itemInfo.logisticsDesc }
    	</div>
    	<div class="tab-pane">
    	    <p style="height:20px;"></p>
    		COMMENTS
    	</div>
    </div>
    
    <div class="recommand">
      <div class="recommandTitle">YOU MAY ALSO LIKE 猜你喜欢</div>
      
      <!-- 推荐图片轮播 -->
      <div class="detailRecommandPosterScroll font fontColorGray">
	  <div class="detailRecommandPosters">
	  <ul id="somethingLikeContainer">
      </ul>
	  </div>
	  </div>
    </div>
      <!-- 推荐图片轮播 end -->
    </div>
  </div>
</c:otherwise>
</c:choose>

<!-- 提示框 -->
<div id="buywarning" class="warningdialog fixshow">
  <p>WARNING 提醒<a href="javascript:void(0)" onclick="$('.warningdialog').hide();"></a></p>
  <div class="warningdialogcontent">
      PAYMENT FUNCTION WILL RELEASE IN STAGE Ⅱ!<br>支付功能将在第二期开放。<br>
      <input type="button" value="确定 YES" onclick="$('.warningdialog').hide();">
  </div>
</div>
<!-- 提示框    结束-->

<!-- 页尾 -->
<%@include file="/views/global/footer.jsp" %>
</body>
<script type="text/javascript">
$(document).ready(function(){
	$.getEx("item/detail/somethingLike", {itemId: ${itemInfo.id}}, function(jsonData){
		var strArray = new Array();
		if(true == jsonData.success){
			var itemList = jsonData.itemList;
			for(var i=0; i< itemList.length; i++){
				var item = itemList[i];
				strArray.push('<li>');
				strArray.push('<a href="item/detail?id='+item.id+'" target="_blank"><img src="'+item.mainUrl+'"/></a>');
				strArray.push('<div class="detailRecommandPosterInfo">'+item.title+'&nbsp;'+(null==item.cnName?'':item.cnName)+'</div>');
				strArray.push('</li>');
			}
		}
		$("#somethingLikeContainer").html(strArray.join(""));
	}, "json");
	
});

function itemaddtocart(target, id) {
	$("#requestItemFavoriteForm").goAjax({
		url:"item/statistics/like",
		type: "POST",
		semantic:false,
		checkLogin: true,
		dataType: "json",
		data:{itemId: id},
		success:function(jsonData){
		if(false == jsonData.success){
			$.error(jsonData.message);
		} else {
			if(jsonData.message=="-1"){
				var left = parseInt($(target).offset().left)+10, top =  parseInt($(target).offset().top)-10, obj=$("target");
			     $(target).append('<div id="zhan"><b>-1<\/b></\div>');
			     $('#zhan').css({'position':'absolute','z-index':'1', 'color':'#C30','left':left+'px','top':top+'px'}).animate({top:top-10,left:left+10},'slow',function(){
			          $(this).fadeIn('fast').remove();
			     });
			     $(target).css("background-image","url(static/images/page/independentBrand/brandFavorite.png)");
			}else if(jsonData.message=="1"){
				var left = parseInt($(target).offset().left)+10, top =  parseInt($(target).offset().top)-10, obj=$(".favoriteBtn");
			     $(target).append('<div id="zhan"><b>+1<\/b></\div>');
			     $('#zhan').css({'position':'absolute','z-index':'1', 'color':'#C30','left':left+'px','top':top+'px'}).animate({top:top-10,left:left+10},'slow',function(){
			          $(this).fadeIn('fast').remove();
			     });
			     $(target).css("background-image","url(static/images/page/independentBrand/brandFavorite2.png)");
			}
			//$.message("OPERATION SUCCESSFUL! ", {time: 2});
			//$(target).removeClass("brandFavoriteBtn").addClass("brandFavoriteBtn2");
		 }
		}
	});
}
</script>
</html>
